<template>
  <div class="index" v-loading="loading">
    <div class="policy-mian">
        <div class="policy-mian-top" >
            <div class="title">选择项目进行政策匹配</div>
        </div>
        <div class="wrap">
           <div class="list">
               <div class="li" v-for="(item,index) in list" :key="index">
                   <div class="top">{{item.itemDesc}}</div>
                   <div class="bottom" @click="tog(index)">
                       <div class="radio flex-jusa" :class="zindex==index?'on':''">
                           <div class="dian"></div><p>是</p>
                       </div>
                   </div>
               </div>
           </div>
           <div class="btn" @click="comitBtn()">提交</div>
        </div>
    </div>
  </div>
</template>
<script>
import '@/assets/styles/policy-public.scss' // iboot css
import {getPolicyNaire} from '@/api/service/service'
export default {
  name: "index",
  data() {
    return {
        list:[],
        questionList:[],
        num:0,
        zindex:0,
        cityId:'',              //地区id
        districtId:'',          //区域id
        cateId:'',              //政策id
        questionItemIds:"",    
        loading:false,
        identity:""
    }
  },
  created() {
    this.cityId=this.getQueryString("cityId");
    this.districtId=this.getQueryString("districtId");
    this.cateId=this.getQueryString("cateId");
    this.identity = this.getQueryString("identity");
    this.apipost();
  },
  mounted(){
    
  },
  methods:{
      apipost(){
        this.loading = true;
        getPolicyNaire({
            // cityId:2,
            // districtId:4,
            // cateId:4
            cityId:this.getQueryString("cityId"),
            districtId:this.getQueryString("districtId"),
            cateId:this.getQueryString("cateId")
        }).then(res => {
            this.loading = false;
            this.questionList = res.datas.questionList;
            let list = res.datas.questionList[0].questionItemList;
            for(let i=0; i<list.length; i++){
                if(i == 0){
                   list[i].on = true; 
                }else{
                    list[i].on = false;
                }
            }
            list.push(
                {
                    id:0,
                    isNo:0,
                    on:false,
                    itemDesc:'以上均不符合？'
                }
            )
            this.list = list;
            // this.area = res.datas[0].children;

        }).catch(err => {
            this.loading = false;
        });
      },
      tog(e){
          this.zindex = e;
      },
      comitBtn(){
          if(this.list[this.zindex].id !== 0){
              //符合
              if(this.num+1 < this.questionList.length){
                this.num++
                this.questionItemIds = this.questionItemIds+this.list[this.zindex].id+",";
                let list = this.questionList[this.num].questionItemList;
                for(let i=0; i<list.length; i++){
                    if(i == 0){
                    list[i].on = true; 
                    }else{
                        list[i].on = false;
                    }
                }
                list.push(
                    {
                        id:0,
                        isNo:0,
                        on:false,
                        itemDesc:'以上均不符合？'
                    }
                )
                this.list = list;
              }else{
                  this.questionItemIds+=this.list[this.zindex].id;
                  this.$router.push({path:'/policy/matching?questionItemIds='+this.questionItemIds+'&cateId='+this.cateId+'&identity='+this.identity})
                  
              }
          }else{
            //   不符合
            this.$router.push({path:'/policy/matching?questionItemIds=&cateId='+this.cateId+'&identity='+this.identity})
          }
          //if()
      },
      getQueryString (name) { 
        let reg = `(^|&)${name}=([^&]*)(&|$)`
        let r = window.location.search.substr(1).match(reg); 
        if (r != null) return unescape(r[2]); return null; 
      }
  }
}
</script>
<style scoped>
.list {
    position: relative;
    z-index: 1;
}
.list .li{
    width: 100%;
    height: 90px;
    background: #FFFFFF;
    box-shadow: 1px 2px 6px 1px rgba(44, 112, 141, 0.18);
    border-radius: 6px;
    margin-bottom: 9px;
}
.list .li .top,.list .li .bottom{
    line-height: 45px;
    box-sizing: border-box;
    font-size: 14px;
}
.list .li .top{
    border-bottom: 1px solid #E8E8E8;
    padding-left: 24px;
    color: #343434;
}
.list .li .bottom .radio .dian{
    width: 13px;
    height: 13px;
    border: 1px solid #DADADA;
    border-radius: 50%;
}
.list .li .bottom .radio p{
    display: inline-block;
    margin: 0;
    height: auto;
    padding-left: 10px;
}
.list .li .bottom .radio.on .dian{
    width: 13px;
    height: 13px;
    border: 4px solid #3EACC4;
    border-radius: 50%;

}
.btn{
    width: 322px;
    height: 42px;
    background: #3EACC4;
    border-radius: 4px;
    text-align: center;
    font-size: 16px;
    color: #fff;
    line-height: 42px;
    margin: 60px auto;
}
</style>